<template>
	<div class="myGradesBox">
		<!-- 搜索栏 -->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->

        <!-- header -->
        <userNav></userNav>
        <!-- header end-->
		<div class="grade-table">
			<table>
				<!-- <thead>
					<tr>
						<th class="tableOne">课程名称</th>
						<th class="tableTwo">开始时间</th>
						<th class="tableThree">结束时间</th>
						<th class="tableFour">参与人数</th>
						<th class="tableFive">成绩</th>
					</tr>
				</thead> -->
				<tbody>
					<tr>
						<td>像CEO一样思考</td>
						<td>2017/10/05 9:30</td>
						<td>2017/10/05 9:30</td>
						<td>24/25</td>
						<td>第二名</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="grade-info">
			<div class="info-left">讲师：徐志强</div>
			<div class="info-right">所在团队：第三组</div>
			<div class="info-left">2017年9月</div>
			<div class="info-right">团队成员：徐伟亚 杨青松 徐伟亚 杨青松 徐伟亚 杨青松 </div>
			<div class="clear"></div>
		</div>
		<div class="grade-box"> <span class="score-info-title">最终得分</span>
			<div class="pull-right">
				<div class="button-groups">
					<div :class="{'active':scaled == false}" @click="scaled=false">原始数据</div>
					<div :class="{'active':scaled == true}" @click="scaled=true">分数</div>
				</div>
			</div>
			<div class="clear"></div>
			<table class="score-table">
				<thead>
					<tr>
						<th></th>
						<th>权重/因素</th>
						<th> <span class="company company_1">&nbsp;</span> <span>公司A</span> </th>
						<th> <span class="company company_1">&nbsp;</span> <span>公司B</span> </th>
						<th> <span class="company company_1">&nbsp;</span> <span>公司C</span> </th>
					</tr>
				</thead>
				<tbody v-if="!scaled">
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr class="last">
						<td> <span>
							最终得分</span> </td>
						<td> <span>50%</span> </td>
						<td> <span>50%</span> </td>
						<td> <span>50%</span> </td>
						<td> <span>50%</span> </td>
					</tr>
				</tbody>
				<tbody v-if="scaled">
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr>
						<td>相对增长的市场份额 (按零售销售额计)</td>
						<td>50%</td>
						<td>95.53</td>
						<td>0.00</td>
						<td>100.00</td>
					</tr>
					<tr class="last">
						<td> <span>
							最终得分</span> </td>
						<td> <span>100</span> </td>
						<td> <span>50</span> </td>
						<td> <span>20%</span> </td>
						<td> <span>30</span> </td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="grade-chart-list">
			<div class="grade-chart half">
				<h5 class="title">我的市场销售额与市场总销售额对比</h5>
				<div class="chart-box">
					<div id="myChart1" class="myChart"></div>
				</div>
			</div>
			<div class="grade-chart half">
				<h5 class="title">我的市场销售额与市场总销售额对比</h5>
				<div class="chart-box">
					<div id="myChart2" class="myChart"></div>
				</div>
			</div>
			<div class="grade-chart">
				<h5 class="title">我的市场销售额与市场总销售额对比</h5>
				<div class="chart-box">
					<div id="myChart3" class="myChart"></div>
				</div>
				<div class="chart-box">
					<div id="myChart4" class="myChart"></div>
				</div>
			</div>
			<div class="grade-chart">
				<h5 class="title">我的市场销售额与市场总销售额对比</h5>
				<div class="chart-box">
					<div id="myChart5" class="myChart"></div>
				</div>
				<div class="chart-box">
					<div id="myChart6" class="myChart"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import userNav from '../components/userNav.vue'
	
    export default {
		components:{
         	userNav:userNav
        },
        data(){
            return{
                scaled:false
            }
        },
        methods:{
        },
        created(){

        },
        mounted(){
        }
    }
</script>